import React, {Component} from 'react'
import {Card, Icon, List} from "antd";
import LinkButton from '../../components/link-button'
import {BASE_IMG_URL} from '../../utils/constants'

const Item = List.Item
/**
 *product的详情子路由组件
 */
export default class ProductDetail extends Component {

    render() {
        //读取携带过来的state数据
        const {productname, desc1, price, detail, images} = this.props.location.state.product
        console.log(images+"22222222222")
        const title = (

            <span>
                <LinkButton>
                    <Icon
                        type='arrow-left'
                        style={{color: 'green', marginRight: 15, fontSize: 20}}
                        onClick={() => this.props.history.goBack()}
                    />
                </LinkButton>
                <span>商品详情</span>
            </span>
        )

        return (
            <Card title={title} className='product-detail'>
                <List>
                    <Item>
                        <div>
                            <span className='left'>商品名称：</span>
                            <span className='right'>{productname}</span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className='left'>商品描述：</span>
                            <span>{desc1}</span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className='left'>商品价格：</span>
                            <span>{price}元</span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className='left'>所属分类：</span>
                            <span>电子产品</span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className='left'>商品图片：</span>
                            <span>
                                {
                                    <img
                                        key={images}
                                        className="product-img"
                                        src={BASE_IMG_URL + images}
                                        alt="images"
                                    />

                                }

                        </span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className='left'>商品详情：</span>
                            <span dangerouslySetInnerHTML={{__html: '<h1 style="color: red">商品详情内容标题</h1>'}}></span>
                        </div>
                    </Item>
                </List>
            </Card>
        )
    }
}